<!DOCTYPE html>
<html>

<head>
    <meta charset='uft-8'>
    <title>音频波效果</title>
    <style type="text/css">
        #container {
            position: relative;
        }

        #container span {
            width: 5px;
            height: 5px;
            top: 0px;
            position: absolute;
            background: red;
            animation: bodong 2s infinite ease;
        }

        #container span:first-child {
            left: 0px;
            animation-delay: .3s;
        }

        #container span:nth-child(2) {
            left: 7px;
            animation-delay: .4s;

        }

        #container span:nth-child(3) {
            left: 14px;
            animation-delay: .6s;
        }

        #container span:nth-child(4) {
            left: 21px;
            animation-delay: .8s;
        }

        #container span:nth-child(5) {
            left: 28px;
            animation-delay: 1s;
        }

        @keyframes bodong {
            0% {
                height: 5px;
                background: bule;
            }

            30% {
                height: 25px;
                background: bule;
            }

            60% {
                height: 30px;
                background: bule;
            }

            80% {
                height: 25px;
                background: bule;
            }

            100% {
                height: 5px;
                background: bule;
            }
        }
    </style>
</head>

<body>
    <div id='container'>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>